<template>
  <div>
    <Modal
        v-model="isShow"
        title="管理数据列"
        width="100%"
        :mask-closable="false">
        <Table :columns="tableColumns" :data="datas" size="small">
          <template slot-scope="{row, index}" slot="operation">
              <Button type="success" size="small" class="table-operation-btn" @click="viewDetailsHandle(row, index)">查看</Button>
              <Button type="primary" size="small" class="table-operation-btn" @click="editDetailsHandle(row, index)">编辑</Button>
          </template>
        </Table>
        <div slot="footer">
          <Button type="success" @click="isShow = false">关闭</Button>
        </div>
    </Modal>
    <Modal
        v-model="detailsModal.isShow"
        title="编辑数据列"
        :mask-closable="false">
        <Row v-for="item in extendColumns" :key="item.key" :gutter="12" style="margin-bottom: 10px;">
          <Col span="6">
            <span style="width: 100%; line-height: 32px; text-align: right; display: inline-block;">{{item.title}}:</span>
          </Col>
          <Col span="12">
            <Select v-if="item.formType == 'select'" v-model="detailsModal.data[item.key]">
              <Option v-for="op in item.options" :value="op.value" :key="op.key">{{ op.title }}</Option>
            </Select>
            <Input v-else-if="item.dataType != 'arr'" v-model="detailsModal.data[item.key]" :placeholder="'请输入' + item.title"/>
            <Input v-else v-model="detailsModal.data[item.key]" :placeholder="'请输入' + item.title" type="textarea" :rows="3"/>
          </Col>
        </Row>
        <div slot="footer">
          <Button type="success" @click="detailsModal.isShow = false">关闭</Button>
        </div>
    </Modal>
  </div>
</template>
<script>
export default {
  name: 'ManagerColumns',
  components: {
  },
  props: {
    datas: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      columns: [
        {
          title: 'key',
          key: 'key'
        },
        {
          title: '列名',
          key: 'title'
        },
        {
          title: '数据类型',
          key: 'dataType',
          formType: 'select',
          options: [
            {
              key: 'str',
              value: 'str',
              title: '字符串'
            },
            {
              key: 'arr',
              value: 'arr',
              title: '数组'
            },
            {
              key: 'obj',
              value: 'obj',
              title: '对象'
            },
            {
              key: 'num',
              value: 'num',
              title: '数字'
            }
          ]
        },
        {
          title: '内容类型',
          key: 'contentType',
          formType: 'select',
          options: [
            {
              key: 'txt',
              value: 'txt',
              title: '文本'
            },
            {
              key: 'img',
              value: 'img',
              title: '图片'
            },
            {
              key: 'url',
              value: 'url',
              title: 'URL'
            },
            {
              key: 'video',
              value: 'video',
              title: '视频'
            },
            {
              key: 'audio',
              value: 'audio',
              title: '音频'
            }
          ]
        }
      ],
      isShow: false,
      detailsModal: {
        isShow: false,
        data: {}
      }
    }
  },
  computed: {
    extendColumns () {
      let columns = this.columns.concat([
        {
          title: '数据采集来源',
          key: 'dataCollectionSource',
          formType: 'select',
          options: [
            {
              key: 'Referer',
              value: 'Referer',
              title: 'Referer'
            },
            {
              key: 'location_href',
              value: 'location-href',
              title: 'location.href'
            },
            {
              key: 'html_head_title',
              value: 'html-head-title',
              title: '页面标题'
            },
            {
              key: 'page_screenshot',
              value: 'page-screenshot',
              title: '页面截图'
            },
            {
              key: 'page_selection_text',
              value: 'page-selection-text',
              title: '页面选择文本'
            },
            {
              key: 'page_selection_html',
              value: 'page-selection-html',
              title: '页面选择HTML'
            },
            {
              key: 'custom',
              value: 'custom',
              title: '自定义'
            }
          ]
        }
      ])
      return columns
    },
    tableColumns () {
      let columns = this.extendColumns.concat([
        {
          title: '操作',
          key: 'operation',
          slot: 'operation',
          width: 130
        }
      ])
      return columns
    }
  },
  methods: {
    show () {
      this.isShow = true
    },
    viewDetailsHandle (row, index) {
      console.log(row, index)
    },
    editDetailsHandle (row, index) {
      console.log(row, index)
      this.detailsModal.isShow = true
      this.detailsModal.data = this.datas[index]
    }
  }
}
</script>

<style lang="less" scoped>
  .table-operation-btn {
    margin-left: 5px;
  }
</style>
